extends ../layout/_layout

append pageCss
    link(rel="stylesheet", href=`${setting.static}static/css/post.css?t=${setting.tstamp}`)

append content

    - const { article } = data
    main.editor__container

        .form-label.post-content
            .form-figure(class=`${article ? 'onebtn' : ''}`)
                input#article-title(type="text", placeholder="文章标题...", value=`${article ? article.title : ''}`, data-post="title")
                if article
                    input#postid.label-input(type="hidden", value=article.path, readonly)
                else
                    input#postid.label-input(type="text", placeholder="文章 id...(不能包含空格等特殊字符)")

            .label-btns
                //- a.icon.icon-upload(href="javascript:;", title="上传图片")
                a#showlibrary.icon.icon-image(href="javascript:;", title="图库")

                .fr
                    .drop-panel.postset
                        .drop-toggle ...
                        #postform-list.drop-content.js-hidden
                            p.tip 自定义文章内容
                            .form-label
                                input.label-input(type="text", placeholder="副标题", value=`${article ? article.subtitle : ''}`, data-post="subtitle")

                            .form-label
                                input.label-input(type="text", placeholder="文章分类", value=`${article ? article.categoryName : ''}`, data-post="categoryName")
                                input.label-input(type="hidden", value=`${article ? article.categoryId : ''}`, data-post="categoryId")

                            .form-label
                                input.label-input(type="text", placeholder="文章标签(多个标签之间用,分开)", value=`${article ? article.tags.join(', ') : ''}`, data-post="tags")

                            .form-label
                                input.label-input(type="text", placeholder="作者(默认 keydone)", value=`${article ? article.author : ''}`, data-post="author")

                            .form-label
                                input#postdate.label-input(type="text", placeholder="发布时间(YYYY-MM-DD)", value=`${article ? article.date : ''}`)

                            .form-label
                                input#postcover.label-input(type="text", placeholder="封面图片地址", value=`${article ? article.cover : ''}`, data-post="cover")

                    span#draft.post-btn 存为草稿
                    if article
                        span#update.post-btn 更新
                    else
                        span#publish.post-btn 发布

            .scrollWrap-textarea
                textarea#textarea.label-textarea(type="text", rows="50", data-post="content") !{article ? article.origin : ''}

        .form-label.post-preview
            h1.post__title #{article ? article.title : "文章预览"}
            #preview.post__content
        input#copyElement(type="text", style="position:absolute; top:0; left: 0; width:10px; height:10px; opacity:0; border:0; z-index:-1;")

append pagejs
    include ../_partial/library

    script(type="text/javascript", src=`${setting.static}static/js/filepond.js?t=${setting.tstamp}`)
    script(src="https://cdn.bootcss.com/markdown-it/8.4.2/markdown-it.min.js")
    script(src=`${setting.static}static/js/md-plugins.js?t=${setting.tstamp}`)
    script(src=`${setting.static}static/js/post.js?t=${setting.tstamp}`)
    script.
        //- markdown editor
        var articleTitle = $('#article-title');
        var post__title = $('.post__title');
        var textarea = $('#textarea');
        var preview = $('#preview');

        articleTitle.on('blur', function() {
            post__title.html($(this).val() || '文章预览');
        });

        var md = window.markdownit({
            html: true,
            breaks: true,
            linkify: true,
            xhtmlOut: true,
            typographer: true,
            highlight: function (str, lang) {
                if (lang && hljs.getLanguage(lang)) {
                    try {
                        return '<pre class="hljs"><code>' + hljs.highlight(lang, str, true).value + '</code></pre>';
                    } catch (__) { }
                }
                return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
            }
        }).use(window.markdownitEmoji)
        .use(window.markdownitCheckbox, {
            divWrap: true,
            divClass: 'checkbox',
            idPrefix: 'checkbox_'
        })
        .use(window.markdownitLinkScheme)
        .use(window.markdownitDeflist)
        .use(window.markdownitDiv);
        // 实时更新预览
        const content = textarea.val();
        preview.html(md.render(content));

        textarea.on('input', function() {
            var result = md.render(textarea.val());
            preview.html(result);
            scrollMap = null;
        });
        // 内容与预览区域同步滚动
        function injectLineNumbers(tokens, idx, options, env, slf) {
            var line;
            if (tokens[idx].map && tokens[idx].level === 0) {
                line = tokens[idx].map[0];
                tokens[idx].attrJoin('class', 'line');
                tokens[idx].attrSet('data-line', String(line));
            }
            return slf.renderToken(tokens, idx, options, env, slf);
        }

        md.renderer.rules.paragraph_open = md.renderer.rules.heading_open = injectLineNumbers;

        var scrollMap;
        function buildScrollMap() {
            var i, offset, nonEmptyList, pos, a, b, lineHeightMap, linesCount, acc, sourceLikeDiv, _scrollMap;

            sourceLikeDiv = $('<div />').css({
                position: 'absolute',
                visibility: 'hidden',
                width: textarea[0].clientWidth,
                'font-size': textarea.css('font-size'),
                'font-family': textarea.css('font-family'),
                'line-height': textarea.css('line-height'),
                'white-space': textarea.css('white-space')
            }).appendTo('body');

            offset = preview.scrollTop() - preview.offset().top;
            _scrollMap = [];
            nonEmptyList = [];
            lineHeightMap = [];

            acc = 0;
            textarea.val().split('\n').forEach(function (str) {
                var h, lh;

                lineHeightMap.push(acc);

                if (str.length === 0) {
                    acc++;
                    return;
                }

                sourceLikeDiv.text(str);
                h = parseFloat(sourceLikeDiv.css('height'));
                lh = parseFloat(sourceLikeDiv.css('line-height'));
                acc += Math.round(h / lh);
            });
            sourceLikeDiv.remove();
            lineHeightMap.push(acc);
            linesCount = acc;

            for (i = 0; i < linesCount; i++) { _scrollMap.push(-1); }

            nonEmptyList.push(0);
            _scrollMap[0] = 0;

            $('.line').each(function (n, el) {
                var $el = $(el), t = $el.data('line');
                if (t === '') { return; }
                t = lineHeightMap[t];
                if (t !== 0) { nonEmptyList.push(t); }
                _scrollMap[t] = Math.round($el.offset().top + offset);
            });

            nonEmptyList.push(linesCount);
            _scrollMap[linesCount] = preview[0].scrollHeight;

            pos = 0;
            for (i = 1; i < linesCount; i++) {
                if (_scrollMap[i] !== -1) {
                pos++;
                continue;
                }

                a = nonEmptyList[pos];
                b = nonEmptyList[pos + 1];
                _scrollMap[i] = Math.round((_scrollMap[b] * (i - a) + _scrollMap[a] * (b - i)) / (b - a));
            }

            return _scrollMap;
        }
        // Synchronize scroll position from source to result
        var syncResultScroll = _.debounce(function () {
            var lineHeight = parseFloat(textarea.css('line-height')), lineNo, posTo;

            lineNo = Math.floor(textarea.scrollTop() / lineHeight);
            if (!scrollMap) {
                scrollMap = buildScrollMap();
            }
            posTo = scrollMap[lineNo];

            preview.stop(true).animate({
                scrollTop: posTo
            }, 50, 'linear');
        }, 50, { maxWait: 33 });

        var syncSrcScroll = _.debounce(function () {
            var scrollTop  = preview.scrollTop(),
                lineHeight = parseFloat(textarea.css('line-height')), lines, i, line;

            if (!scrollMap) {
                scrollMap = buildScrollMap();
            }

            lines = Object.keys(scrollMap);

            if (lines.length < 1) {
                return;
            }

            line = lines[0];

            for (i = 1; i < lines.length; i++) {
                if (scrollMap[lines[i]] < scrollTop) {
                    line = lines[i];
                    continue;
                }
                break;
            }

            textarea.animate({
                scrollTop: lineHeight * line
            }, 50, 'linear');
        }, 50, { maxWait: 33 });

        // Setup listeners
        textarea.on('touchstart mouseover', function () {
            preview.off('scroll');
            textarea.on('scroll', syncResultScroll);
        });

        preview.on('touchstart mouseover', function () {
            textarea.off('scroll');
            preview.on('scroll', syncSrcScroll);
        });

    script.
        $(function() {
            var closeForm = $('#closeForm'),
                formlist = $('#form-list'),
                publishBtn = $('#publish'),
                postdate = $('#postdate'),
                postid = $('#postid'),
                draft = $('#draft'),
                update = $('#update'),
                fields = $('[data-post]'),
                postbtn = $('.post-btn'),
                articleId = "#{article ? article._id : ''}",
                articlePath = "#{article ? article.path : ''}",
                data = {
                    article: {},
                    type: 0,
                };

            function publish(type) {

                for(var i=0, length=fields.length; i<length; i++) {
                    const item = $(fields[i]);
                    var key = item.attr('data-post');
                    var val = item.val();
                    data.article[key] = val;
                }

                data.article.path = articlePath || postid.val();
                data.article.date = +new Date(postdate.val()) || +new Date();
                data.article.author = data.author || 'keydone';
                data.article.isDraft = type === 1 ? 1 : 0;
                data.postId = articleId;
                data.postType = type;

                apiPublish(data, function(res) {
                    setTimeout(function() {
                        postbtn.removeClass('loading');
                    }, 200);

                    if(res.status === 0) {
                        $.growl.notice({ title: type === 0 ? '发布成功!' : ( type === 1 ? '已存为草稿' : '更新成功!') });
                    } else {
                        $.growl.error({ message: res.msg });
                    }
                });
            }

            publishBtn.on('click', function() {
                if(!$(this).hasClass('loading')) {
                    $(this).addClass('loading');
                    publish(0);
                }
            });

            draft.on('click', function() {
                if(!$(this).hasClass('loading')) {
                    $(this).addClass('loading');
                    publish(1);
                }
            });

            update.on('click', function() {
                if(!$(this).hasClass('loading')) {
                    $(this).addClass('loading');
                    publish(1);
                }
            });

            closeForm.on('click', function() {
                $(this).toggleClass('open');
                formlist.toggleClass('closed');
            });

            // 上传图片
            var showlibrary = $('#showlibrary');
            var html = template('library')();

            function filePondCreate() {
                var imglibrary = $('#img-library');

                var pond = FilePond.create($('#filePondCover')[0], {
                    labelIdle: '上传图片<p>(支持拖拽或 <span class="filepond--label-action"> 浏览文件 </span>)</p>',
                    labelFileWaitingForSize: '正在加载文件信息',
                    labelFileSizeNotAvailable: '大小不可用',
                    labelFileLoading: '正在加载',
                    labelFileLoadError: '加载文件失败',
                    labelFileProcessing: '正在上传',
                    labelFileProcessingComplete: '已完成',
                    labelFileProcessingAborted: '已取消',
                    labelFileProcessingError: '上传失败',
                    labelTapToCancel: '取消',
                    labelTapToRetry: '重试',
                    labelTapToUndo: '撤销',
                    labelButtonRemoveItem: '移除',
                    labelButtonAbortItemLoad: '中断',
                    labelButtonRetryItemLoad: '重试',
                    labelButtonAbortItemProcessing: '中断',
                    labelButtonUndoItemProcessing: '撤销',
                    labelButtonRetryItemProcessing: '重试',
                    labelButtonProcessItem: '上传',
                    name: 'filepond',
                    allowRevert: true,
                    allowMultiple:true,
                    dropOnPage: true,
                    dropValidation: true,
                    onerror: function(error, file, status) {
                        console.log(error, file, status);
                    },
                    oninit: function() {
                        setOptions();
                    },
                });

                function setOptions() {
                    var imgwrap = '" /><div class="actions">'
                        + '<span class="action ic-cover"><i class="icon icon-img"></i>设为封面</span>'
                        + '<span class="action ic-view"><i class="icon icon-img"></i>查看大图</span>'
                        + '<span class="action ic-del"><i class="icon icon-delete"></i>删除图片</span>'
                        + '<span class="action ic-copy"><i class="icon icon-copy"></i>复制路径</span>'
                        + '</div></li>';

                    FilePond.setOptions({
                        server: {
                            url: '/api/stuff-upload?store=images&postid=' + postid.val(),
                            process: {
                                onload: function(res) {
                                    var res = JSON.parse(res);
                                    if(+res.status === 0) {
                                        var data = res.data;
                                        var articleId = data.articleId;
                                        var filepath = data.filepath;
                                        var stuffId = data.stuffId;

                                        setTimeout(function() {
                                            imglibrary.children().eq(0).after('<li class="imgwrap" data-src="' + filepath + '" data-articleid="' + articleId + '" data-stuffid="' + stuffId + '"><i class="icon icon-cover js-hidden"></i><img class="img" src="' + filepath + imgwrap);

                                            var li = imglibrary.children().eq(1);
                                            var img = li.find('img');
                                            img.on('load error', function() {
                                                var width = $(this)[0].naturalWidth;
                                                li.attr('data-naturalwidth', width);
                                            });
                                        }, 500);
                                    }
                                },
                            },
                        },
                    });

                }

            }

            function filePondDestory() {
                FilePond.destroy($('#filePondCover')[0]);
            }

            var growl = null;
            showlibrary.on('click', function() {
                growl = $.growl({
                    duration: false,
                    clickToClose: false,
                    location: 'library',
                    title: '图库',
                    message: html,
                    mounted: filePondCreate,
                    destory: filePondDestory,
                });
            });

            var doc = $(document);
            // 设为封面
            doc.on('click', '#img-library .ic-cover', function() {
                var imgwrap = $(this).closest('.imgwrap');
                var src = imgwrap.attr('data-src');
            });

            // 查看大图
            doc.on('click', '#img-library .ic-view', function() {
                var imgwrap = $(this).closest('.imgwrap');
                var naturalWidth = imgwrap.attr('data-naturalWidth');
                var src = imgwrap.attr('data-src');
                $.growl({
                    duration: false,
                    location: 'library',
                    layout: 'fullImg',
                    title: '查看大图',
                    message: '<div class="imgContain" style="width:' + (naturalWidth || '') + 'px"><img class="img" src="' + src + '" /></div>',
                });
            });

            // 删除图片
            doc.on('click', '#img-library .ic-del', function() {
                var imgwrap = $(this).closest('.imgwrap');
                imgwrap.remove();
            });

            // 复制图片地址
            doc.on('click', '#img-library .ic-copy', function(e) {
                var imgwrap = $(this).closest('.imgwrap');
                var copyElement = $('#copyElement');
                var src = imgwrap.attr('data-src');
                copyElement.val('<div style="max-width: 100%;">\n\n![](' + src + ')</div>').select();
                $.growl.notice({ message: '复制成功! 去粘贴吧' });
                document.execCommand('copy');
                growl.close(e);
            });
        });
